<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<template slot="table">
			<el-table size="medium" :data="tableData" height="100%" v-bind="tableConfig">
				<el-table-column prop="name" label="院系名称" min-width="300" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="160">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleAddChildren(row)">添加子级</el-button>
						<el-button size="medium" type="text" @click="handleOpenDialog(row)">修改</el-button>
						<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<form-dialog v-model="formDialog" :data-id="dataId" :list="tableData" :is-sub.sync="isChildren" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import systemMixins from '@/views/common/systemMixins';
import { getDepartTree, deleteDepart } from '@/api/system/tbSysDept';
export default {
	mixins: [systemMixins],
	components: { formDialog },
	data() {
		return {
			isChildren: false,
			tableConfig: {
				rowKey: 'id',
				defaultExpandAll: true,
				treeProps: { children: 'childList', hasChildren: 'hasChildren' }
			}
		};
	},

	methods: {
		//获取表格数据
		async getTableData() {
			let result = await getDepartTree().then((res) => res.data);
			if (result.code === '0') {
				this.tableData = result.data || [];
			}
		},

		//删除院系数据
		handleDeleteData(data) {
			this.handleDeleteFunction(data.id, data.name, '院系');
		},

		//删除数据请求
		async deleteDataRequest(params) {
			let result = await deleteDepart(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除院系成功');
				this.queryTableData();
			}
		},

		//添加子级
		handleAddChildren(data) {
			this.dataId = data.id;
			this.formDialog = true;
			this.isChildren = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.system_depart_manage {
	display: flex;
	align-items: flex-start;
	height: 100%;

	.el-tree::v-deep {
		.el-tree-node__content {
			height: 36px;
		}
		.el-tree-node__expand-icon {
			font-size: 18px;
			padding: 3px;
		}
	}
}

.sw_depart_manage {
	display: flex;
	flex-direction: column;
	width: 32%;
	min-width: 300px;
	height: 100%;
	padding: 7px 0 0px 16px;
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: hidden;
	border-right: solid 1px #ebeef5;

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 16px;
		flex-shrink: 0;

		h4 {
			cursor: pointer;
		}
	}

	.el-tree {
		flex: 1;
		padding-bottom: 6px;
		overflow: auto;
	}

	dl.node {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		overflow: hidden;

		dt {
			flex: 1;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-right: 10px;
		}

		dd {
			flex-shrink: 0;
		}
	}
}

.sw_userbox_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;

	.button {
		margin-bottom: 10px;
	}

	.sw-pagination {
		margin-top: 0;
		padding: 10px;
	}
}
</style>